<template>
    <div class="container">
        <!-- 路径导航区域 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>文章分类管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索区域 -->
        <el-row>
            <el-form :inline="true">
                <el-form-item label="文章分类名称">
                    <el-input v-model="queryInfo.name" clearable @clear="queryList" placeholder="请输
入文章分类名称"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="queryList">搜索</el-button>
                    <el-button type="primary" @click="toAddArticleType">新增文章分类</el-button>
                    <el-button type="danger" @click="deleteByIds">批量删除</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <!-- 表格区域 -->
        <el-table :data="articleTypeList" border style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="name" label="分类名"></el-table-column>
           
        
          
            <el-table-column label="操作">
                <template slot-scope='scope'>
                    <el-link type="primary" @click="toEditArticleType(scope.row)">编辑文章分类</el-link>
                    <el-link type="primary" @click="todeleteCourse(scope.row)">删除文章分类</el-link>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNum" :page-sizes="[2, 5, 10, 20]" :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>


        <!-- 新增和修改的对话框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancle">
            <el-form :model="articleTypeData">
                
                <el-form-item label="分类名" label-width="80px">
                    <el-input placeholder="请输入分类名" v-model="articleTypeData.name"></el-input>
                </el-form-item>
                

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancle">取 消</el-button>
                <el-button type="primary" @click="addCourse">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            // 查询信息对象
            queryInfo: {
                name: '',
                pageNum: 1,
                pageSize: 10
            },
            total: 183,
            articleTypeList: [],
            title: '', // 对话框标题
            dialogFormVisible: false, // 是否显示对话框
            articleTypeData: { // 文章分类对象
                "id": '',
                "name": ''
                
            },

            obs: [],//批量删除
			ids: [],//批量删除
        }
    },
    mounted() {
        this.queryList();
    },
    methods: {

        deleteByIds() {
			if(this.obs.length==0){
				this.$message.success("没选数据，删除失败")
				return;
			}
			for (let it of this.obs) {
				this.ids.push(it.id)
			}
			// console.log(this.ids);
			this.$confirm('确认删除吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				// 用户点击了确定按钮，执行相应的操作  
				this.$http.delete('articleType/removeBatch?ids='+this.ids)
					.then((result) => {
						this.$message.success(result.data.message)
						if (this.total % this.queryInfo.pageSize == 1 || this.queryInfo.pageSize == 1) {
							if (this.total != 1) {
								this.queryInfo.pageNum--;
							}
						}
						this.queryList()
					})
			}).catch(() => {
				// 用户点击了取消按钮，执行相应的操作  
				this.$message.error('删除失败')
			});
		},
		//批量删除
		handleSelectionChange(val) {
			this.obs = val;

		},

        //删除文章
		todeleteCourse(row) {
			this.$confirm('确认删除吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				// 用户点击了确定按钮，执行相应的操作  
				this.$http.delete('articleType/remove/' + row.id)
					.then((result) => {
						this.$message.success(result.data.message)
						if (this.total % this.queryInfo.pageSize == 1 || this.queryInfo.pageSize == 1) {
							if (this.total != 1) {
								this.queryInfo.pageNum--;
							}
						}
						this.queryList()
					})
			}).catch(() => {
				// 用户点击了取消按钮，执行相应的操作  
				this.$message.error('删除失败')
			});
		},

        // 添加文章
        addCourse() {
            if (this.articleTypeData.id) { // 有值为true  修改
                this.$http.put("articleType/edit", this.articleTypeData)
                    .then(resp => {
                        if (resp.data.status == 200) {
                            // 消息提示
                            this.$message.success('修改成功！');
                            // 清空数据
                            this.cancle()
                            // 关闭对话框
                            this.dialogFormVisible = false;
                            // 重新查询
                            this.queryList()
                      
                        } else {
                            this.$message.error('接口异常！')
                        }
                    })

            } else {
                this.$http.post("articleType/add", this.articleTypeData)
                    .then(resp => {
                        if (resp.data.status == 200) {
                            // 消息提示
                            this.$message.success('添加成功！');
                            // 清空数据
                            this.cancle()
                            // 关闭对话框
                            this.dialogFormVisible = false;
                            // 重新查询
                            this.queryList()
                         
                        } else {
                            this.$message.error('接口异常！')
                        }
                    })
            }
        },
        // 进入修改的预览数据页面
		toEditArticleType(row) {
			//console.log(row)
			// 赋值
			this.articleTypeData = row;
			// 设置标题
			this.title = "修改文章";
			// 开启对话框
			this.dialogFormVisible = true;
		
		},
        // 进入添加的对话框
        toAddArticleType() {
            this.title = "新增文章分类";
            this.dialogFormVisible = true;
            // 把当前登录的用户的id赋值为文章的teacher_id
            // this.article.teacherId = sessionStorage.getItem('userid');
        },
        // 取消对话框
        cancle() {
            this.queryList();
            this.dialogFormVisible = false;
            this.articleTypeData = { // 文章分类对象
                "id": '',
                "name": ''
                
            }

		},

        queryList() {
            // 调用后端接口来获取数据
            this.$http.get('articleType/find', {
                params: this.queryInfo
            })
                .then(resp => {
                    if (resp.data.status == 200) {
                        // console.log(resp.data)
                        this.articleTypeList = resp.data.data.list;
                        this.total = resp.data.data.total;
                        // console.log(this.articleList)
                    } else {
                        this.$message.error('查询失败！')
                    }
                })
        },

        handleSizeChange(size) {
            //console.log('每页显示数量发生改变');
            this.queryInfo.pageSize = size;
            this.queryInfo.pageNum = 1;
            // 重新查询
            this.queryList()
        },
        handleCurrentChange(num) {
            //console.log('页码发生改变');
            this.queryInfo.pageNum = num;
            // 重新查询
            this.queryList();
        }
    }

}



</script>

<style lang="scss" scoped></style>